<template>
    <!-- 微博分析 -->
    <view class='weibo_box'>
        <!-- 博主地域分布 -->
        <view class='title'>博主地域分布</view>
        <view class='map_box'>
            <map-item :width='charts_width'></map-item>
            <view class='grade'>
                <view class='num max_num'>2922</view>
                <view class='grade_item'>
                    <text>高</text>
                    <view></view>
                    <text>低</text>
                </view>
                <view class='num min_num'>1000</view>
            </view>
        </view>
        <!-- 粉丝分布 -->
        <view class='title'>粉丝分布</view>
        <histogram :width='charts_width' :histogram_data='histogram_data'></histogram>
        <view v-if="false">
            <!-- 水军分析 -->
            <view class='title'>水军分析</view>
            <pie 
                :width='charts_width' 
                :pie_data='pie_data1'
                :legend_show="true"
                :dataLabel="true"
                :id='"water_pie"'></pie>

            <!-- 参与方式 -->
            <view class='title'>参与方式</view>
            <view style='height: 450upx' v-if='participation_show'>
                <pie 
                :width='charts_width' 
                :pie_data='pie_data2'
                :legend_show="true"
                :dataLabel="true"
                :id='"participation_pie"'></pie>
            </view>
        </view>


        <!-- 新闻网媒、论坛贴吧 -->
        <view class='ranking_box'>
            <view v-for='(item,key) in content.interactrank' :key='key'><ranking :title='title(key)+"："' :content='item'></ranking></view>
        </view>
        
        <!-- 微博典型观点分析 -->
        <viewpoint 
            :title='"微博典型观点分析"' 
            :index='10'
            :content="content.weibopoint" 
            v-if='viewpoint_show'></viewpoint>
        
    </view>
</template>

<script>

    import mapItem from './charts/map.vue'
    import histogram from './charts/histogram.vue'
    import pie from './charts/pie.vue'
    import ranking from "./common/ranking.vue"
    import viewpoint from "./viewpoint.vue"

    export default {
        components: {
            mapItem,
            histogram,
            pie,
            ranking,
            viewpoint
        },
        props: {
            content: Object
        },
        data() {
            return {
                charts_width: 0,
                participation_show: false,
                viewpoint_show: false,
                // 柱状图数据
                histogram_data: {
                    categories: [],
                    series: [
                        { name: "粉丝分布",data: [] }
                    ]
                },
                // 水军分析数据
                pie_data1: [
                    { name: "真实用户", data: 1.38, color: "#2191FF" },
                    { name: "水军", data: 98.62, color: "#FFCC11" }, 
                ],
                // 参与方式数据
                pie_data2: [
                    { name: "转发", data: 37.28, color: "#2191FF" },
                    { name: "评论", data: 62.72, color: "#FFCC11" }, 
                ],
                title(title) {
                    switch(title) {
                        case "fan": 
                            return "声量排行"
                        break;
                        case "original": 
                            return "参与排行"
                        break;
                        case "comment": 
                            return "转发排行"
                        break;
                        case "repost": 
                            return "评论排行"
                        break;
                    }
                }
            }
        },
        async mounted() {
           this.charts_width = await this.$getDomInfo(".weibo_box","width");
            console.log('1111',this.content.weibopoint)
            // 粉丝分布
            this.getFans()


            let index = 0;
            let timer = null;
            timer = setInterval(() => {
                if(index == 1) {
                    this.participation_show = true;
                }
                if(index == 2) {
                    this.viewpoint_show = true;
                    clearInterval(timer)
                }
                index++;
            }, 1000);
           
        },
        methods: {
            // 粉丝分布
            getFans() {
                this.content.fans.forEach(val => {
                    let x_data = val.fanslower + "-" + val.fansupper;
                    this.histogram_data.categories.push(x_data);
                    this.histogram_data.series[0].data.push(val.count);
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.weibo_box {
    width: 100%;
    font-size: 24upx;
    color: #333;
    .title {
        width: 100%;
        font-weight: 600;
        padding-bottom: 30upx;
    }
    .map_box {
        width: 100%;
        position: relative;
        margin-bottom: 50upx;
        .grade {
            position: absolute;
            left: 50upx;
            bottom: 0upx;
            .num {
                position: absolute;
                left: 35upx;
            }
            .max_num {
                top: 25upx;
            }
            .min_num {
                bottom: 25upx;
            }
            .grade_item {
                width: 15upx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                >view {
                    width: 100%;
                    height: 100upx;
                    margin: 10upx 0;
                    background:linear-gradient(0deg,rgba(224,255,255,1),rgba(0,109,214,1));
                    position: relative;
                    &::before,&::after {
                        content: "";
                        position: absolute;
                        left: 18upx;
                        border-bottom: 8upx solid transparent;
                        border-right: 8upx solid transparent;
                        border-top: 8upx solid transparent;
                    }  
                    &::before {
                        top: -6upx;
                        border-left: 8upx solid #006DD6;
                        transform: rotate(45deg);
                    } 
                    &::after {
                        bottom: -6upx;
                        border-left: 8upx solid #E0FFFF;
                        transform: rotate(-45deg);
                    } 
                }
            }
        }
    }
    .ranking_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        >view {
           width: 50%;
           padding-right: 20upx;
           box-sizing: border-box;
           &:nth-child(2n) {
               padding: 0;
           }
        }
    }
}
</style>